.card.gdpr-banner {
	position: fixed;
	bottom: 0;
	width: 100%;
	padding: 16px;
	background-color: var( --color-neutral-70 );
	color: var( --color-text-inverted );
	z-index: z-index( 'root', '.gdpr-banner' );

	animation-duration: 0.5s;
	animation-name: gdpr-banner__slideup;
	animation-timing-function: ease-in-out;

	&.is-compact {
		margin-bottom: 0;
	}

	@include breakpoint( '>660px' ) {
		display: flex;
		font-size: 16px;
		padding: 16px 24px;
	}

	@include breakpoint( '>960px' ) {
		font-size: 16px;
		padding: 16px 32px;
		max-width: 960px;
		left: calc( 50% - 480px );
	}

	a {
		color: var( --color-text-inverted );
		text-decoration: underline;
		&:hover {
			text-decoration: none;
		}
	}
}

@keyframes gdpr-banner__slideup {
	0% {
		opacity: 0;
		pointer-events: none;
		transform: translateY( 100% );
	}

	100% {
		opacity: 1;
		pointer-events: auto;
		transform: translateY( 0 );
	}
}

.card.gdpr-banner__hiding {
	pointer-events: none;
	animation-duration: 0.3s;
	animation-name: gdpr-banner__fadeout;
	animation-timing-function: ease-in-out;
	animation-fill-mode: forwards;
}

@keyframes gdpr-banner__fadeout {
	0% {
		opacity: 1;
		transform: translateY( 0 );
	}

	100% {
		opacity: 0;
		transform: translateY( 100% );
	}
}

.gdpr-banner__text-content {
	line-height: 1.4;
	max-width: 700px;
	margin-right: auto;
}

.gdpr-banner__buttons {
	margin-top: 14px;
	text-align: center;
	@include breakpoint( '>660px' ) {
		flex: 0 0 auto;
		margin: 0 0 0 16px;
		text-align: inherit;
	}
}

.gdpr-banner__acknowledge-button {
	width: 100%;
	text-align: center;
	@include breakpoint( '>660px' ) {
		width: auto;
	}
}
